<template>
    <div class="total">
        <div class="main">
            <div @click="$router.go(-1)" class="flex">
                <div><i class="el-icon-arrow-left back"></i></div>
                <div style="padding-left: 270px;font-size: 18px;color: #3D3D3D;">医院科室满意度答卷调查</div>
            </div>
            <div>
                <img :src="topImg" width="100%">
            </div>
            <div class="box">
                <div class="content">
                    <div class="title">
                        {{ getTitle.title }}
                    </div>
                    <div class="discription">
                        {{ getTitle.content }}
                    </div>
                    <div class="card">
                        <div class="card_title">
                            本次共{{ getTest.length }}题，请填写。
                        </div>

                        <div v-for="v in getTest" :key="v.project.id">
                            <article class="card_single" v-if="v.project.multipleValue == 1">
                                <div class="card_single_title"><span v-if="v.project.isRequired" class="required p-r-5">*</span>{{
                                    v.project.title }} </div>
                                <div class="tips" v-if="v.project.describe">({{ v.project.describe }})</div>
                                <div class="card_single_selected">
                                    <el-radio-group v-model="single" disabled>
                                        <div class="m-b-10" v-for="value in v.project.options">
                                            <el-radio v-model="single" :label="value.answer">{{ value.answer }}</el-radio>
                                        </div>
                                    </el-radio-group>
                                </div>
                            </article>

                            <article class="card_checkbox" v-if="v.project.multipleValue == 3">
                                <div class="card_checkbox_title"><span v-if="v.project.isRequired"
                                        class="required p-r-5">*</span>{{ v.project.title }} </div>
                                <div class="tips" v-if="v.project.describe">({{ v.project.describe }})</div>
                                <div class="card_checkbox_selected">
                                    <el-checkbox-group v-model="checkList" disabled>
                                        <div class="m-b-10" v-for="value in v.project.options">
                                            <el-checkbox :label="value.answer"></el-checkbox>
                                        </div>
                                        <!-- <div class="m-b-10"><el-checkbox label="复选框 B"></el-checkbox></div>
                                        <div class="m-b-10"><el-checkbox label="复选框 C"></el-checkbox></div> -->
                                    </el-checkbox-group>
                                </div>
                            </article>

                            <article class="card_single_input" v-if="v.project.multipleValue == 2">
                                <div class="card_label"><span v-if="v.project.isRequired"
                                        class="required p-r-5">*</span>{{ v.project.title }} </div>
                                <div class="tips" v-if="v.project.describe">({{ v.project.describe }})</div>
                                <el-input disabled v-model="singleText" placeholder="请输入内容" class="m-t-5"></el-input>
                            </article>

                            <article class="card_muti_input" v-if="v.project.multipleValue == 4">
                                <div class="card_label"> <span v-if="v.project.isRequired"
                                        class="required p-r-5">*</span>{{ v.project.title }}</div>
                                <div class="tips" v-if="v.project.describe">({{ v.project.describe }})</div>
                                <el-input disabled v-model="mutiText" type="textarea" :rows="5" placeholder="请输入内容"
                                    class="m-t-5"></el-input>
                            </article>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { linkDic } from '@/api/hcem/title'
export default {
    name: '',
    data() {
        return {
            topImg: require('@/assets/img/top_img.png'),
            single: '',  //单选
            checkList: [],  //多选
            singleText: '',
            mutiText: '',
            sector: []  //环节
        }
    },
    computed: {
        getTest() {
            // res.data.hcemTemplatTopic.map(v => {
            //     try {
            //         JSON.parse(v.score)
            //         v.score = JSON.parse(v.score)
            //         v.scoreInfo = JSON.parse(v.scoreInfo)
            //         if (v.linkType !== 0) {
            //             this.sector.forEach(r => {
            //                 console.log(r, v);
            //                 if (r.linkType == v.value) {
            //                     v.linkTypeTitle = r.label
            //                 }
            //             })
            //         } else {
            //             v.linkTypeTitle = ''
            //         }
            //         //  console.log(v, 444);
            //         return
            //     } catch (e) {
            //         console.log(e);
            //     }
            //     return v
            // })
            // this.$store.state.hcem.section.map(v => {
            //     //console.log(v,'vvv');
            //     if (v.project.sectorValue !== '') {
            //         this.sector.forEach(r => {
            //            // console.log(r, v);
            //             if (r.value == v.project.sectorValue) {
            //                 v.project.linkTypeTitle = r.label
            //             }
            //         })
            //     } else {
            //         v.project.linkTypeTitle = ''
            //     }
            // })



            return this.$store.state.hcem.section
        },
        getTitle() {
            return this.$store.state.hcem.qustionForm
        }
    },
    created() {
        this.sectorList()
    },
    mounted() {
        // this.drvice()
        // console.log(this.getTest, this.getTitle);
    },
    methods: {
        async sectorList() {
            let res = await linkDic()  //环节列表
            if (res.data.length > 0) {
                res.data.map(v => {
                    this.sector.push({
                        'value': v.dictValue,
                        'label': v.dictLabel
                    })
                })
            }
        },
        drvice() {
            if (this._isMobile()) {
                alert("手机端");
                // this.$router.replace('/mi');
            } else {
                alert("pc端");
                // this.$router.replace('/test');
            }
        },
        _isMobile() {
            let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
            return flag;
        },
    }
}
</script>

<style lang='scss' scoped>
.tips {
    color: #999999;
    font-size: 16px;
    line-height: 28px;
    text-indent: 2em;
}

.total {
    background-color: #dddddd;

    //z-index: 3;
    .main {
        background-color: white;
        width: 800px;
        margin: 0 auto;

        //  position: relative;
        .back {
            font-size: 24px;
            padding: 5px 0;
            margin-left: 10px;
            cursor: pointer;
            color: #666666;
        }

        .box {
            // height: 100vh;
            position: relative;
            z-index: 2;
            width: 100%;
            margin-top: -30px;
            background: #FFFFFF;
            border-radius: 24px 24px 0px 0px;
            padding-bottom: 20vh;

            .content {
                padding: 0 30px;

                .title {
                    font-size: 20px;
                    color: #3D3D3D;
                    width: 100%;
                    padding: 25px 0;
                    text-align: center;
                }

                .discription {
                    padding: 20px 0;
                    color: #999999;
                    font-size: 18px;
                    line-height: 28px;
                    text-indent: 2em;
                }

                .card {

                    .card_title {
                        padding-top: 15px;
                        color: #999999;
                    }

                    .required {
                        color: red;
                    }

                    .card_single {
                        .card_single_title {
                            font-size: 17px;
                            font-weight: 500;
                            color: #000000;
                            line-height: 28px;
                            margin-top: 20px;
                        }

                        .card_single_selected {
                            margin-top: 15px;
                            margin-left: 20px;

                            ::v-deep .el-radio__inner {
                                width: 18px !important;
                                height: 18px !important;
                            }

                            ::v-deep .el-radio__label {
                                font-size: 18px;
                            }
                        }
                    }

                    .card_checkbox {
                        .card_checkbox_title {
                            font-size: 17px;
                            font-weight: 500;
                            color: #000000;
                            line-height: 28px;
                            margin-top: 20px;
                        }

                        .card_checkbox_selected {
                            margin-top: 15px;
                            margin-left: 20px;

                            ::v-deep .el-checkbox__inner {
                                width: 18px !important;
                                height: 18px !important;
                            }

                            ::v-deep .el-checkbox__label {
                                font-size: 18px;
                            }
                        }
                    }

                    .card_single_input {
                        // display: flex;
                        margin-top: 15px;
                        margin-right: 30px;

                        ::v-deep .el-input__inner {
                            //  border: none;
                            //border-bottom: 1px solid #ccc;
                        }

                        .card_label {
                            margin-right: 15px;
                            line-height: 20px;
                            // flex-shrink: 0;
                        }

                    }

                    .card_muti_input {
                        //display: flex;
                        margin-top: 15px;
                        margin-right: 30px;
                        // align-items: center;

                        .card_label {
                            margin-right: 15px;
                            line-height: 20px;
                            // flex-shrink: 0;
                        }
                    }

                }

            }

        }
    }
}
</style>